<template>
    <div class="time">{{ currentTime }}</div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'

// 将 currentTime 定义为响应式引用
const currentTime = ref('')

// 更新时间
const updateTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  }).replace(/\//g, '.')
}

onMounted(() => {
  updateTime()
  setInterval(updateTime, 1000)
})
</script>


<style scoped>
.time {
    margin-right: 80px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    width: 30px;
    font-size: 20px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }
</style>
